import {
  Layout as LayoutDHX, TreeCollection,
  TreeGrid as TreeGridDHX,
  Toolbar as ToolbarDHX,
  Form as FormDHX,
  Window as WindowDHX,
  Popup as PopupDHX,
} from "dhx-suite-package";
import Raphael from "raphael";

// Colours ////////////////////////////////////////

var pink = "rgb(255, 150, 206)";
var red  = "#FF0000";
var blue = "#60AFCE";
var orange = "#EC9875";
var lightgrey = "#DDDDDD";
var grey = "#999999";
var white = "#FFFFFF";
var black = "#000000";
var transparent = "rgba(0,0,0,0)";


// Keybox shape /////////////////////////

var rectangle = 0;
var ellipse   = 1;

var key_path = "M18.386,16.009l0.009-0.006l-0.58-0.912c1.654-2.226,1.876-5.319,0.3-7.8c-2.043-3.213-6.303-4.161-9.516-2.118c-3.212,2.042-4.163,6.302-2.12,9.517c1.528,2.402,4.3,3.537,6.944,3.102l0.424,0.669l0.206,0.045l0.779-0.447l-0.305,1.377l2.483,0.552l-0.296,1.325l1.903,0.424l-0.68,3.06l1.406,0.313l-0.424,1.906l4.135,0.918l0.758-3.392L18.386,16.009z M10.996,8.944c-0.685,0.436-1.593,0.233-2.029-0.452C8.532,7.807,8.733,6.898,9.418,6.463s1.594-0.233,2.028,0.452C11.883,7.6,11.68,8.509,10.996,8.944z";

var obj = new Array();

var keyfocus = -1;

// useful function //////////////////////

function getPx(idx){
  return ( 100 * idx ) % 300 + 50;
}

function getPy(idx){
  return 100 * parseInt( idx / 3 ) + 50;
}

function setFocus(idx){
  console.log("set focus len: %d", obj.length);
  keyfocus = idx;
  for ( var i = 0; i < obj.length; ++ i ){
    if ( i == idx ){
      obj[i].rect.attr({"stroke": red });
    }else{
      obj[i].rect.attr({"stroke": pink });
    }
  }
}

// class ////////////////////////////////

class Key{
  constructor(paper, idx, kinfo) {
    this.paper = paper;
    this.idx = idx;
    this.px = kinfo.x;// getPx(idx);
    this.py = kinfo.y;// getPy(idx);
    this.kinfo = kinfo;
    this.hname = kinfo['name'];
    this.kname = kinfo['keyname'];
    this.keyuid = kinfo['keyuid'];
    this.patternInit();
  }
  patternInit() {
    var that = this;
    // 挂钩名字+钥匙名字
    var title = that.hname + "\n" + this.kname;
    that.text = that.paper.text(that.px + 50, that.py + 25, title).attr({
      "fill": black,
      "font-size": 15,
    });
    // 钥匙图片
    that.key = that.paper.path(key_path).attr({
      "fill": black,
      "stroke": black,
    });
    that.key.transform("t"+(that.px+50)+","+(that.py+50)+"s1.5");
    // 外框
    that.rect = that.paper.rect(that.px, that.py, 99, 99).attr({
      "fill": transparent,
      "stroke": pink,
    });
    // 点击外框，聚焦
    that.rect.click(function(){
      setFocus(that.idx);
    });
    // 移动进去，显示借用人
    that.rect.hover(function(){ // hover in
      if ( that.kinfo['state'] == 'off' )
        that.info = that.paper.text(that.px+45, that.py-10, "借用人："+that.keyuid).attr({
          "fill": black,
          "font-size": 15,
        });
    }, function (){             // hover out
      if ( that.kinfo['state'] == 'off' )
        that.info.hide();
    });
  }
  // 借走该钥匙
  return(){
    var that = this;
    that.key.attr({ "fill": black, "stroke": black, });
  }
  // 归还该钥匙
  borrow(){
    var that = this;
    that.key.attr({ "fill": grey, "stroke": grey, });
  }
  // 移动所有元素
  moveAll(px, py){
    var that = this;
    that.rect.attr({ x: px, y: py });
    that.text.attr({ x: px + 50, y: py + 25 });
    that.key.transform("t"+(px + 50)+","+(py + 50)+"s1.5");
  }
  // 允许拖动该钥匙
  drag(){
    var that = this;
    function onmove(dx, dy){
      that.moveAll(that.px + dx, that.py + dy);
    };
    function onstart(){};
    function onstop(){
      that.px = that.rect.attr('x');
      that.py = that.rect.attr('y');
    }
    that.rect.drag(onmove, onstart, onstop);
  }
  // 取消允许拖动该钥匙
  undrag(){
    var that = this;
    that.rect.undrag();
  }
  // 设置挂钩钥匙位置
  setPosition(px, py){
    var that = this;
    that.px = px;
    that.py = py;
    that.moveAll(that.px, that.py);
  }
}

class Keybox {
  constructor(paper, boxinfo) {
    console.log("boxinfo", boxinfo);
    this.paper = paper;
    this.boxinfo = boxinfo;
    this.shape = "长方形";// boxinfo.shape;
    this.image = null;
    this.patternInit();
  }
  patternInit(){
    var that = this;
    console.log("init keybox img");
    switch ( that.shape ){
      case "长方形":
        that.image = that.paper.rect(0, 0, 1100, 400).attr({
          "fill": lightgrey,
          "stroke-width": 0
        });
        break;
      case "椭圆"://ellipse:
        that.image = that.paper.ellipse(500, 200, 450, 180).attr({
          "fill": lightgrey,
          "stroke-width": 0
        });
        break;
    }
  }
}

class FormView {
  constructor(paper) {
    this.paper = paper;
  }
  loadKeys(keybox, keys){
    var that = this;
    /////////////////////////
    console.log("===============");
    console.log("keybox: ",keybox,"keys",keys);
    // 全局变量初始化 ////////
    that.paper.clear();
    obj.splice(0);
    keyfocus = -1;
    // 新建钥匙箱 ///////////
    var mykeybox = new Keybox(that.paper, keybox);
    // obj.push(mykeybox);
    // 新建钥匙 ////////////
    for ( var i = 0; i < keys.length; ++ i ){
      var mykey = new Key(that.paper, i, keys[i]);
      if ( keys[i]['keystate'] == 'offhook' )
        mykey.borrow();
      obj.push(mykey);
    }
  }
  getFocus(){
    if ( keyfocus == -1 )
      return undefined;
    return obj[keyfocus].kinfo;
  }
  dragKeys(){
    for ( var i = 0; i < obj.length; ++ i ){
      obj[i].drag();
    }
  }
  undragKeys(){
    for ( var i = 0; i < obj.length; ++ i ){
      obj[i].undrag();
    }
  }
  getKeyStates(){}
  // 获取挂钩钥匙的hookid, px, py
  getPosition(){
    if ( keyfocus == -1 )
      return undefined;
    return [obj[keyfocus].kinfo.hookid, obj[keyfocus].px, obj[keyfocus].py];
  }
  // 获取所有挂钩钥匙的hookid, px, py
  getAllPosition(){
    var allpos = new Array();
    for ( var i = 0; i < obj.length; ++ i ){
      allpos.push([obj[i].kinfo.hookid, obj[i].px, obj[i].py]);
    }
    return allpos;
  }
  savePosition(px, py){
    obj[keyfocus].setPosition(parseInt(px), parseInt(py));
  }
}

export {
  FormView
}